<template>
    <div>
        <Header></Header>
        <h3>轮播图其他操作</h3>
        <el-row :gutter="30">
            <el-col :span="10"
                ><div class="grid-content bg-purple">
                    <h4>更改轮播图上架状态</h4>
                    <el-form :model="oneData" label-width="80px">
                        <el-form-item label="是否上架">
                             <el-switch  v-model="value" active-color="#13ce66" inactive-color="#999"
                               @change="changeShow($event)">
                            </el-switch>
                        </el-form-item>
                    </el-form>
                   <h4>删除上传文件-轮播图</h4>
                  <el-form>
                       <el-form-item label="轮播图地址">
                             <el-select  v-model="deleteImg" placeholder="请选择" >
                                <el-option  v-for="(item,index) in imgData"
                                    :key="index"
                                    :value="item" 
                                    :label="item"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button   type="primary" @click="onSubmit" >确认删除</el-button>
                        </el-form-item>
                  </el-form>
                </div></el-col>
        </el-row>
    </div>
</template>

<script>
import Header from "../common/Header.vue";
import {createNamespacedHelpers} from 'vuex'
const{ mapState,mapActions} = createNamespacedHelpers('swipers')
export default {
    components: {
        Header,
    },
    data() {
        return {
            _id:'',
            value:'',
            deleteImg:'',
        };
    },
    created() {
         this._id= this.$route.params._id;
        this.getOneDataAsync(this._id)
        setTimeout(()=>{
            if(this.oneData.show == 0){
                this.value =false
            }else{
               this.value =true
           }
        },30)
        this.getDataAsync()
    },
    computed:{
         ...mapState(['oneData','imgData']),
    },
    methods: {
        ...mapActions(['getOneDataAsync','updateSwiperShow','getDataAsync','deleteImgAsync']),
        async changeShow(val){
           const {data} = await this.updateSwiperShow(this._id)
        //    console.log('data',data);
           if(data.code == 200){
               this.$alert('状态修改成功！', '提示窗口', {
                     confirmButtonText: '确定',
                });
                this.$router.push('/SwipersList')
           }
        },
        //删除轮播图
        async onSubmit(){
            
           const {data} = await this.deleteImgAsync({fileName:this. deleteImg})
           if(data.code){
               this.$message({
                        message: "恭喜你，删除成功",
                        type: "success",
               });
               this.$router.push('/SwipersList')
           }
        }
    },
};
</script>

<style scoped lang='scss'>
h3 {
    color: #999;
    margin: 20px 0;
}
h4 {
    color: rgb(116, 174, 221);
    margin: 20px 0;
}
.el-select {
    width: 300px;
}
.el-button {
    background-color: rgb(202, 219, 248);
    border-color: rgb(202, 219, 248);
    &:hover {
        background-color: rgb(202, 219, 248);
        border-color: rgb(202, 219, 248);
    }
}
</style>